<template>
  <el-sub-menu
    v-if="menuItem.children && menuItem.children.length"
    :index="menuItem.name"
  >
    <template #title>
      {{ menuItem.meta.title }}
    </template>
    <MenuComponent
      v-for="child in menuItem.children"
      :key="child.name"
      :menuItem="child"
    ></MenuComponent>
  </el-sub-menu>
  <el-menu-item
    v-else
    :index="menuItem.path"
    @click="toPath(menuItem.meta.title, menuItem.path)"
  >
    {{ menuItem.meta.title }}
  </el-menu-item>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import { useTabStore } from "../store/modules/tabStore";
interface Meta {
  // requiresAuth: boolean;
  title: string;
  // cacheable: boolean;
  // permissions?: {
  //   roles: string[];
  //   actions: string[];
  // };
}

interface MenuItem {
  path: string;
  name: string | undefined;
  meta: Meta;
  children?: MenuItem[];
  component: any;
}
export default defineComponent({
  name: "MenuComponent",
  props: {
    menuItem: {
      type: Object as () => MenuItem,
      required: true,
    },
  },
  setup(props, ctx) {
    const router = useRouter();
    const toPath = (title: string | undefined, path: string) => {
      router.replace(path);
      useTabStore().increment(title as string, path);
      useTabStore().currentPath = path;
    };
    return {
      toPath,
    };
  },
});
</script>
